import React, { useState, useEffect } from 'react'
import { NavBar } from 'antd-mobile'
import "./Cate.less"
import { SearchBar } from 'antd-mobile';
import axios from "axios"
import { reqGetcate, reqGetgoods, reqGetgoodsinfo } from '../../http/api';

export default function Cate(props) {
    // 1设置初始值
    const [cateList, setcateList] = useState([])
    const [n,setN]=useState([])

    const [goodsList,setGoodsList]=useState([])

    // 2请商品数据
    useEffect(() => {
        reqGetcate().then(res => {
            if (res.data.code === 200) {
                setcateList(res.data.list)
            }
        });
        changelie(0,1)
    }, [])

    let changelie=(index,id)=>{
        setN(index);
        reqGetgoods({fid:id}).then(res=>{
            if (res.data.code === 200) {
                setGoodsList(res.data.list)
            }
        })
    }
    return (
        // 3渲染数据
        <div className="home">
            <NavBar>分类</NavBar>
            <SearchBar placeholder="Search" maxLength={8} onSubmit={() => this.props.history.push("/search")} />
            <div className="box">
                <div className="left">
                    {
                        cateList.map((item, index) => (
                            <div className="leftcon">
                                <div onClick={() => changelie(index,item.id)} className={index === n ? "active" : ""} key={item.id}>{item.catename}</div></div>
                        ))
                    }
                </div>

                <div className="right">
                        <h3>热门精选</h3>
                        {
                            goodsList.map((item) => (
                                <div className="leftcon" key={item.id} onClick={() =>props.history.push('/detail/' + item.id)}>
                                    <img src={item.img} alt="" />
                                    {item.goodsname}</div>
                            ))
                        }
                    </div>
            </div>
        </div>
    )
}

